<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>腕带信息查询</title>
<link rel="stylesheet" type="text/css"
	th:href="@{/plugin/layui/css/layui.css}" />
<script type="text/jscript" th:src="@{/plugin/layui/layui.js}"
	charset="UTF-8"></script>
<script type="text/jscript" th:src="@{/plugin/jquery.min.js}"></script>
<script>
	<!--翻页方法 -->
	function paging(arg){
		var wriststrp_id=$("#idnum").val();
		var pageNum=$("#text").val();
		var total=$("#totalpage").val();
		var tel=$("#tel").val();
		var state=$("input[name='state']:checked").val();
		//改变后的页面
		var page=parseInt(pageNum)+arg;
		
		
		if(page<1||page>total){
			return;	
		}
		
		//刷新页面
		getPagebean(wriststrp_id,tel,state,page);
		
	}
	
	
	<!-- 获取信息分页bean -->
	function getPagebean(wriststrp_id,tel,state,page){

		$.post(
				"[[@{/conditionQuerry}]]"
				,{
				wriststrp_id : wriststrp_id,
				"customer.tel" : tel,
				info_state : state,
				pageindex : page
				
				},
				function(pagebean){
					if(pagebean==""){
						alert("没找到相关信息！");
						$("#tbody").html("");
						return;
					}
					var data=pagebean.beanList;
					if(data!=""){
						var context="";
					$.each(data,function(index,obj){
						var state="";
						if(obj.info_state==0)state="正在使用";
						if(obj.info_state==1)state="已经结算"; 
						if(obj.info_state==2)state="挂失状态";
						
						context+=
						'<tr><td class="layui-col-md1" style="height: 30px; text-align: center; line-height: 30px;">'
						+((index+1)+(page-1)*10)
						+'</td><td class="layui-col-md1" style="height: 30px; text-align: center; line-height: 30px;">'
						+obj.wriststrp_id
						+'</td><td class="layui-col-md2" style="height: 30px; text-align: center; line-height: 30px;">'
						+obj.createtime
						+'</td><td class="layui-col-md2" style="height: 30px; text-align: center; line-height: 30px;">'
						+state
						+'</td><td class="layui-col-md2" style="height: 30px; text-align: center; line-height: 30px;">'
						+obj.balance
						+'</td><td class="layui-col-md2" style="height: 30px; text-align: center; line-height: 30px;">'
						+obj.customer.tel
						+'</td><td class="layui-col-md2" style="height: 30px; text-align: center; line-height: 30px;">'
						+"是"
						+'</td></tr>'
							});
					
					var pagecontent=
						'<a href="javaScript:paging(-1)" >上一页</a> '
					+' 第 <span>'
					+pagebean.pageIndex+"/"+pagebean.totalPage+'</span>页 '
					+' <a href="javaScript:paging(1)" >下一页</a>';
					//翻页菜单
					$("#pagemenu").html(pagecontent);
					
					//当前页码
					$("#text").val(pagebean.pageIndex);
					
					$("#totalpage").val(pagebean.totalPage);
					
					$("#tbody").html(context);
					return;	
					}else{
						alert("相关用户信息不存在！");
						$("#tbody").html("");
					}
				
				});	
	}

	//营业时间
	function showTime() {
 		var	nowtime = new Date();
 		var	year = nowtime.getFullYear();
 		var	month = nowtime.getMonth() + 1;
 		var	date = nowtime.getDate();
		$("#mytime").html(year + "年" + month + "月" + date +"日");
		$("#mytime2").html("营业时间：" +nowtime.toLocaleTimeString());
		};

	$(function(){

	setInterval("showTime()", 1000);


	})
			<!-- 模拟按键功能，点击div变小-->
		function dosome(num){
			var id="#key"+num;
		
			$(id).css("font-size","20px");
			
		}
		function dother(num){
					var id="#key"+num;
					
					$(id).css("font-size","25px");
			<!-- 根据不同按键做不同功能   -->		
			if (id=="key1") {
					
			} else if(id=="key2"){
						
			}else if(id=="key3"){
						
			}else if(id=="key4"){ 
					
			}
		}
		
		<!-- 输入腕带号，读取腕带  --> 
		$(function(){
			$("#submit").mousedown(function(){
				$("#submit").css("font-size","15px");
			});
			$("#submit").mouseup(function(){
				$("#submit").css("font-size","20px");
				<!--点击释放后查询腕带信息  -->
				var wriststrp_id=$("#wriststrp_id").val();
				var tel=$("#tel").val();
				var state=$("input[name='state']:checked").val();
				getPagebean(wriststrp_id,tel,state,1);
						
			});
		})
		
		</script>
</head>
<body>
	<!-- 页码控制 -->
	<input type="hidden" id="text">
	<input type="hidden" id="totalpage">
	<!--最外层容器控制位置-->
	<div id="" class="container" style="height: 500px; margin: 30px 100px;">
		<div id="" class="layui-row ">

			<!--  左边操作功能模块-->
			<div id="" class="layui-col-md12 layui-bg-gray"
				style="height: 500px;">
				<div id="" class="layui-row ">
					<!-- 左侧菜单框-->
					<div id="" class="layui-col-md10 " style="height: 500px;">
						<!-- 印刷号 -->
						<div id="" class="layui-col-md12"
							style="border: #40AFFE 2px solid; background-color: white; height: 85px;">
							<div id="" class="layui-col-md2"
								style="height: 40px; text-align: center; line-height: 40px; font-size: 20px;">
								<div id="" class="layui-col-md12" style="text-align: right;">
									印&nbsp;刷&nbsp;号：</div>
							</div>
							<div id="" class="layui-col-md2"
								style="height: 40px; text-align: center; line-height: 40px; font-size: 20px;">
								<div id="" class="layui-col-md12" style="text-align: left;">
									<input id="wriststrp_id" type="text" size="10" ;  />
								</div>
							</div>
							<div id="" class="layui-col-md5"
								style="height: 40px; text-align: center; line-height: 40px; font-size: 20px;">
								<div id="" class="layui-col-md6" style="text-align: right;">
									手&nbsp;机&nbsp;号&nbsp;码：</div>
								<div id="" class="layui-col-md6" style="text-align: left;">
									<input id="tel" type="text" size="10" ; />
								</div>
							</div>
							<div id="submit" class="layui-col-md2"
								style="background-color: #007DDB; height: 40px; text-align: center; line-height: 40px; font-size: 20px;">
								<div id="" class="layui-col-md12" style="text-align: center;">
									读&nbsp;取&nbsp;腕&nbsp;带</div>
							</div>
							<div id="" class="layui-col-md2"
								style="height: 40px; text-align: center; line-height: 40px; font-size: 20px;">
								<div id="" class="layui-col-md12" style="text-align: right;">
									账&nbsp;户&nbsp;状&nbsp;态：</div>

							</div>
							<div id="" class="layui-col-md4"
								style="height: 40px; text-align: center; line-height: 40px; font-size: 20px;">
								<div id="" class="layui-col-md12" style="text-align: left;">
									<input type="radio" name="state" checked="checked" id=""
										value="0" />未结算 <input type="radio" name="state" id=""
										value="1" />已结算 <input type="radio" name="state" id=""
										value="2" />已挂失

								</div>
							</div>
						</div>
						<!-- 消费项目列表 -->
						<div id="" class="layui-col-md12"
							style="margin-top: 5px; background-color: #93D1FF; font-size: 20px; height: 30px;">
							&nbsp;&nbsp;&nbsp;<i class="layui-icon layui-icon-list"
								style="font-size: 20px;"></i>腕带信息查询
						</div>
						<div id="" class="layui-col-md12">
							<table border="1px" bordercolor="#f2f2f2" width="100%">
								<tr bgcolor="#007DDB">
									<td class="layui-col-md1"
										style="height: 30px; text-align: center; line-height: 30px;">序号</td>
									<td class="layui-col-md1"
										style="height: 30px; text-align: center; line-height: 30px;">腕带编号</td>

									<td class="layui-col-md2"
										style="height: 30px; text-align: center; line-height: 30px;">发放时间</td>
									<td class="layui-col-md2"
										style="height: 30px; text-align: center; line-height: 30px;">状态</td>
									<td class="layui-col-md2"
										style="height: 30px; text-align: center; line-height: 30px;">可用余额</td>
									<td class="layui-col-md2"
										style="height: 30px; text-align: center; line-height: 30px;">电话号码</td>
									<td class="layui-col-md2"
										style="height: 30px; text-align: center; line-height: 30px;">扣除超时押金</td>
								</tr>
								<tbody id="tbody">

								</tbody>

							</table>
						</div>
						<!-- 翻页 -->
						<div id="pagemenu" class="layui-col-md12"
							style="position: absolute; text-align: center; font-size: 20px; bottom: 20px;">
						</div>
					</div>

					<!-- 右侧菜单-->
					<div id="" class="layui-col-md2" style="height: 500px;">
						<div id="" style="width: 100%; color: white; text-align: center;">

							<div id="key1" onmousedown="dosome(1)" onmouseup="dother(1)"
								style="text-align: center; background-color: #01AAED; font-size: 25px; margin: 15px; border: #009688 1px solid; width: 75%; height: 75px; line-height: 75px;">
								<i class="layui-icon layui-icon-search" style="font-size: 25px;"></i>
								查询
							</div>
							<div id="key2" onmousedown="dosome(2)" onmouseup="dother(2)"
								style="text-align: center; background-color: #00FF00; font-size: 25px; margin: 15px; border: #009688 1px solid; width: 75%; height: 75px; line-height: 75px;">
								<i class="layui-icon layui-icon-util" style="font-size: 25px;"></i>发放单
							</div>
							<div id="key3" onmousedown="dosome(3)" onmouseup="dother(3)"
								style="text-align: center; background-color: #00FFFF; font-size: 25px; margin: 15px; border: #009688 1px solid; width: 75%; height: 75px; line-height: 75px;">
								<i class="layui-icon layui-icon-password"
									style="font-size: 25px;"></i>结算单
							</div>
							<div id="key4" onmousedown="dosome(4)" onmouseup="dother(4)"
								style="text-align: center; background-color: #FF5722; font-size: 25px; margin: 15px; border: #009688 1px solid; width: 75%; height: 75px; line-height: 75px;">
								<i class="layui-icon layui-icon-close-fill"
									style="font-size: 25px;"></i>关闭
							</div>
						</div>




					</div>
				</div>


			</div>
		</div>
		<!-- 页脚-->
		<div class="layui-row layui-bg-gray" style="text-align: center;">
			<div id="mytime" class="layui-col-md3"
				style="border: lightblue 1px solid; height: 30px;"></div>
			<div class="layui-col-md3"
				style="border: lightblue 1px solid; height: 30px;">
				操作用户：yanhui</div>
			<div id="mytime2" class="layui-col-md3"
				style="border: lightblue 1px solid; height: 30px;"></div>
			<div class="layui-col-md3"
				style="border: lightblue 1px solid; height: 30px;">某某游乐园</div>
		</div>
	</div>

	</div>

</body>
</html>
